<template>
  <div class="parent">
    <p class="unitp">tCO₂e</p>
    <echartsDom v-if="isShowEcharts" :width="'100%'" :height="'240px'" :option="option" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watch, onMounted } from "vue";
import echartsDom from "./echartsDom.vue";
import * as echarts from "echarts";
import { deviceStat } from "@/api/waterKanban";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  chartValue: {
    type: Object,
    default: () => {}
  }
});
import { gradients } from "@/api/doubleCarbonManage/chartscolor";
const isShowEcharts = ref(false);
const state = reactive({
  option: {}
});
const { option } = toRefs(state);

const getoptions = () => {
  console.log(props.chartValue);
  if (props.chartValue.length > 0) {
    isShowEcharts.value = true;
    option.value = {
      color: ["#5792F3", "#4CC9C9", "#57C972", "#FFC265", "#F1647A", "#9E47C3"],
      toolbox: {
        show: true,
        feature: {
          saveAsImage: {
            title: "点击保存为图片"
          }
        }
      },
      title: {
        // text: "碳排放类别占比",
        left: "center"
      },
      grid: {
        left: "20px",
        top: "50px",
        right: "10px",
        bottom: "100px",
        containLabel: true
      },
      // legend: {},
      tooltip: {
        trigger: "item",
        confine: true
      },
      legend: {
        top: "bottom",
        type: "scroll",
        width: "60%"
      },
      label: {
        formatter: "{d}%：{b}"
      },
      series: [
        {
          data: props.chartValue,
          type: "pie",
          name: "碳排放量区域占比",
          emphasis: {
            focus: "series"
          },
          radius: ["40%", "60%"],
          itemStyle: {
            normal: {
              color: function (params) {
                var colorList = gradients;
                return colorList[params.dataIndex];
              }
            }
          }
          // itemStyle: {
          //   shadowBlur: 10,
          //   ShadowOffsetX: 0,
          //   shadowColor: "rgba(0,0,0,0.5)"
          // }
        }
      ]
    };
  } else {
    isShowEcharts.value = false;
  }
};
watch(
  () => props.chartValue,
  newOption => {
    console.log(newOption);
    getoptions();
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.unitp {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 12px;
  color: #7f8189;
}
</style>
